<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../css/layui.css" />
    <script src="../../layui.js"></script>
    <style>
        .contaili {
            width: 850px;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .contaili::after {
            content: "";
            height: 30px;
            width: 100%;
            border-bottom: 6px solid rgb(138 180 187 / 46%);
            display: block;
        }

        .test {
            color: red;
        }
    </style>
</head>

<body>
    <a href="https://www.layui.com/doc/modules/table.html#cols">layui官网</a><br>
    <a href="#">表格数据是从node访问中得到的，先启动同级目录下的 node-data.js 文件：supervisor node node-data</a><br><br>

    <script type="text/html" id="barDemo5">
        <a class="layui-btn layui-btn-xs" lay-event="check">选择行</a>
        <a class="layui-btn layui-btn-xs" lay-event="check">取消行</a>
    </script>
    <div class="contaili">
        <h3>5、事件，直接看源码</h3>
        <table id="table5" lay-filter="table5"></table>
    </div>
    
    <div class="contaili">
        <h3>4、表格列拖拽</h3>
        <table id="table4" lay-filter="table4"></table>
    </div>


    <script type="text/html" id="barDemo3">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="resize">重置表格尺寸</a>
        <a class="layui-btn layui-btn-xs" lay-event="reload">表格重载</a>
        <a class="layui-btn layui-btn-xs" lay-event="getData">获取表格的全部数据</a>
    </script>
    <div class="contaili">
        <h3>3、基础方法</h3>
        <table id="table3" lay-filter="table3"></table>
    </div>


    <div class="contaili">
        <h3>2、基础参数一览表</h3>
        <table id="table2" lay-filter="table2"></table>
    </div>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <div class="contaili">
        <h3>1、开始验证layui表格之数据--cols - 表头参数一览表</h3>
        <table id="table1" lay-filter="table1"></table>
    </div>


    <script src="layui01-数据表格.js"></script>
</body>

</html>